<script setup lang="ts">
import {computed, inject, onMounted, watch} from "vue";
import PerList from "@/components/form/perList.vue";

const props = defineProps([
  'department',
  'rowNumber',
  'rid',
  'goodsAllList'
])
const perAllList=inject('perAllList')
const xiangshanli_list = defineModel()
const totalNumber = computed(() => {
  let total = 0
  for (let i = 0; i < xiangshanli_list.value.length; i++) {
    total += Number(xiangshanli_list.value[i].number)
  }
  return total
})
const totalMoney = computed(() => {
  let total = 0
  for (let i = 0; i < xiangshanli_list.value.length; i++) {
    total += Number(xiangshanli_list.value[i].number) * Number(xiangshanli_list.value[i].costPrice)
  }
  return total
})
onMounted(() => {
  for (let i = 0; i < props.rowNumber; i++) {
    xiangshanli_list.value.push({
      id: "",
      cId: "",
      number: "",
      costPrice: "",
      per: "",
      remark: ""
    })
  }
  for (let i = 0; i < xiangshanli_list.value.length; i++) {
    watch(() => xiangshanli_list.value[i].id, () => {
      for (let j = 0; j < props.goodsAllList.length; j++) {
        if (props.goodsAllList[j].id == xiangshanli_list.value[i].id) {
          xiangshanli_list.value[i].cId = props.goodsAllList[j].cid
          break
        }
      }
    })
    watch([()=>xiangshanli_list.value[i].id,()=>xiangshanli_list.value[i].per],()=>{
      for (let j = 0; j < perAllList.value.length; j++) {
        if (props.rid==perAllList.value[j].uid
            &&perAllList.value[j].gid==xiangshanli_list.value[i].id
            &&perAllList.value[j].per==xiangshanli_list.value[i].per){
          xiangshanli_list.value[i].costPrice=perAllList.value[j].costPrice
          break
        }else {
          xiangshanli_list.value[i].costPrice=0
        }
      }
    })
  }
})
</script>
<template>
  <div class="xiangshanli_box">
    <div class="dialog_recevingUnit">
      部门:{{ props.department }}
    </div>
    <slot>
    </slot>
    <div class="xiangshanli_table">
      <table>
        <thead>
        <tr>
          <th>序号</th>
          <th>商品名称</th>
          <th>单位</th>
          <th>下单数量</th>
          <th>单价</th>
          <th>含税金额</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in xiangshanli_list">
          <td style="width: 80px">{{ index + 1 }}</td>
          <td style="width: 120px">
            <el-select
                v-model="item.id"
                placeholder=""
            >
              <el-option
                  v-for="item in props.goodsAllList"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </td>

          <td style="width: 100px">
            <per-list
                v-model="item.per"
                :id="item.id"
            ></per-list>
          </td>

          <td style="width: 100px">
            <el-input
                v-model="item.number"
            />
          </td>
          <td style="width: 100px">
            {{ item.costPrice }}
            <!--            {{item.costPrice?item.costPrice:0}}-->
          </td>
          <td style="width: 100px">
            {{ Number(item.costPrice) * Number(item.number) }}
          </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
          <td></td>
          <td>小计</td>
          <td></td>
          <td>{{ totalNumber }}</td>
          <td></td>
          <td>{{ totalMoney }}</td>
        </tr>
        </tfoot>
      </table>
    </div>
  </div>

</template>
<style scoped>
@import "@/assets/print.css";

.xiangshanli_table {
  width: 99%;
  margin-top: 10px;
}
</style>